import React from 'react';
import {Card, Form, InputNumber, Upload, message, Button, Input,Checkbox,Radio, Select, Switch, DatePicker, TimePicker, Icon, Success,} from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const RadioGroup= Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;
  class FromRegister extends React.Component{
    state = {}

    handleSubmit =() => {
        let userInfo = this.props.form.getFieldsValue();
        console.log(JSON.stringify(userInfo))
        message.success(`${userInfo.userName} 恭喜你 成功了 ：密码为 ${userInfo.userPwd}`)
    }
    getBase64 = (img, callback)=>{
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

 

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                userImg:imageUrl,
                loading: false,
            }));
        }
    }
   
  

    render() {
        const { getFieldDecorator } = this.props.form;
        const fromItemLayout = {
            labelCol:{
                xs:24,
                sm:4
            },
            wrapperCol:{
                xs:24,
                sm:10 
            }
        }
        const offsetLayout = {
            wrapperCol: {
                xs:24,
                sm:{
                    span:12, offset:4
                }
            }
        }
        const rowObject ={
            minRows: 4, maxRows: 6
        }
        return (
            <div>
                <Card title="注册表单">
                    <Form layout="horizontal">
                        <FormItem label="用户名" {...fromItemLayout}>
                            {
                                 getFieldDecorator("userName",{
                                    initialValue:'',
                                    rules:[
                                        {
                                            required: true,
                                            message: "用户名不能为空"
                                        }
                                    ]
                                })(
                                    <Input  placeholder="请输入用户名" />
                                )
                            }
                        </FormItem>

                        <FormItem label="密码" {...fromItemLayout}>
                            {
                                 getFieldDecorator("userPwd",{
                                    initialValue:'',
                                    labelAlign:'right',
                                    rules:[
                                        {
                                           
                                            required: true,
                                            message: "密码不能为空"
                                        }
                                    ]
                                })(
                                    <Input type="password" placeholder="请输入密码" />
                                )
                            }
                        </FormItem>

                        <FormItem label="性别" {...fromItemLayout}>
                            {
                                 getFieldDecorator("sex",{
                                    initialValue:'1',
                                    labelAlign:'left',
                                })(
                                  <RadioGroup>
                                      <Radio value="1">男</Radio>
                                      <Radio value="2">女</Radio>
                                  </RadioGroup>
                                )
                            }
                        </FormItem>

                        <FormItem label="年龄" {...fromItemLayout}>
                            {
                                 getFieldDecorator("sex",{
                                    initialValue:'23'
                                })(
                                  <InputNumber />
                                )
                            }
                        </FormItem>

                        <FormItem label="当前状态" {...fromItemLayout} >
                            {
                                 getFieldDecorator("state",{
                                    initialValue:'q'
                                })(
                                 <Select>
                                     <Option value="q">咸鱼翻身</Option>
                                     <Option value="n">鲤鱼打挺 </Option>
                                     <Option value="a">鹿死谁手 </Option>
                                     <Option value="s">花言巧语 </Option>
                                     <Option value="d">锦上添花 </Option>
                                     <Option value="g">雪中送炭 </Option>
                                 </Select>
                                )
                            }
                        </FormItem>

                        <FormItem label="多选状态" {...fromItemLayout} >
                            {
                                 getFieldDecorator("interest",{
                                    initialValue:['n']
                                })(
                                 <Select mode="multiple">
                                     <Option value="q">游泳</Option>
                                     <Option value="n">篮球 </Option>
                                     <Option value="a">足球</Option>
                                     <Option value="s">跑步 </Option>
                                     <Option value="d">爬山</Option>
                                     <Option value="g">大家 </Option>

                                 </Select>
                                )
                            }
                        </FormItem>

                        <FormItem label="是否已婚" {...fromItemLayout} >
                            {
                                 getFieldDecorator("isMarried",{
                                    valuePropName:'checked',
                                    initialValue:true
                                })(
                                    <Switch />
                                )
                            }
                        </FormItem>

                        <FormItem label="生日" {...fromItemLayout} >
                            {
                                 getFieldDecorator("birthday",{
                                    initialValue:moment('2020-1-28')
                                })(
                                    <DatePicker />
                                )
                            }
                        </FormItem>

                        <FormItem label="联系地址" {...fromItemLayout} >
                            {
                                 getFieldDecorator("address",{
                                    initialValue:['哈尔滨秋林博物馆','哈尔滨秋林博物馆']
                                })(
                                    <TextArea 
                                      autosize={rowObject}
                                    />
                                )
                            }
                        </FormItem>

                        <FormItem label="早起时间" {...fromItemLayout} >
                            {
                                 getFieldDecorator("time",{
                                  
                                })(
                                    <TimePicker 
                                        shoTime
                                        format="YYYY-MM-DD HH:mm:ss"
                                    />
                                )
                            }
                        </FormItem>

                        <FormItem label="头像" {...fromItemLayout} >
                            {
                                 getFieldDecorator("userImg",{
                                  
                                })(
                                    <Upload 
                                    listType="picture-card"
                                    showUploadList={false}
                                    action="//jsonplaceholder.typicode.com/posts/"
                                    onChange={this.handleChange}
                                  >
                                        {this.state.userImg?<img src={this.state.userImg} /> : <Icon type="plus" />}
                                    </Upload>
                                )
                            }
                        </FormItem>

                        <FormItem   {...offsetLayout} >
                            {
                                 getFieldDecorator("time",{
                                  
                                })(
                                    <Checkbox>我已经阅读<a href="#">完</a>了</Checkbox>
                                )
                            }
                        </FormItem>

                        <FormItem   {...offsetLayout} >
                            <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}
export default Form.create()(FromRegister);